<template>
  <div>
    <h1>v-model 钱数：{{ money }} --- {{ pageNo }} --- {{ pageSize }}</h1>
    <input type="text" v-model="info" />
    <hr />
    <!-- <child :modelValue="money" @update:modelValue="handler"></child> -->
    <!-- 
      v-model组件身上使用
      第一：相当有给子组件传递props[modelValue] = 10000
      第二：相当于给子组件绑定自定义事件update:modelValue 
    -->
    <child v-model="money"></child>
    <child-1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></child-1>
  </div>
</template>

<script setup lang="ts">
import child from "./child.vue";
import child1 from "./child1.vue"
import { ref } from "vue";

let info = ref("");

// 父组件的数据前数
let money = ref(10000);

// 自定义事件回调
const handler = (num) => {
  // 将来接收子组件传递过来的数据
  money.value = num;
};

// 父亲的数据
let pageNo = ref(1)
let pageSize = ref(3)

</script>
<style scoped lang="less">
</style>